<#import path="/base/Drag.class,/Tools.class,/Tab.class,/base/Three.class" root="{{LAM.classPath}}" />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽实例</title>



	<script type="text/javascript">
		LAMJS.run(function() {
			'use strict';
			var System = this;
			System.use();



		});

	</script>






<style type="text/css">
.abs{position:absolute;top:0;left:0;}
.box{width:50%;height:50%;float: left}
#box3{background:#fff;}
.top{top:300px;}
.left{left:300px;}
</style>
</head>

<body>
<canvas id="box1" class="box" width="1600" height="1450">box3</canvas>

<script type="text/javascript">

	LAMJS.run(function(){
		'use strict';
		var System=this;
		var dbox1,canvas;

		var canvas = null;



        function polygon(){
            canvas.polygon().closePath().fill('green');
            new System.Drag(canvas.theCanvas,{'noText':true});
        }

        function box() {
            // canvas=new System.Html5.Shape(document.getElementById("box2"));

            var colors = ['#ff9300','#c45100','#f60'];
            var strokeStyle = '#e5e5e5';
            function f0(canvas) {canvas.closePath().stroke().fill(colors[0]);}
            function f1(canvas) {canvas.closePath().stroke().fill(colors[1]);}
            function f2(canvas) {canvas.closePath().stroke().fill(colors[2]);}
            canvas
            	
				.triangle({'strokeStyle':strokeStyle,'position':[100,0,50,100,150,100],'callback':f0})
				.triangle({'strokeStyle':strokeStyle,'position':[50,100,150,100,100,200],'callback':f0})
				.triangle({'strokeStyle':strokeStyle,'position':[50,100,0,200,100,200],'callback':f0})
				.triangle({'strokeStyle':strokeStyle,'position':[0,200,100,200,50,300],'callback':f0})
				.triangle({'strokeStyle':strokeStyle,'position':[150,300,100,200,50,300],'callback':f0})
				.triangle({'strokeStyle':strokeStyle,'position':[150,300,100,400,50,300],'callback':f0})
				.triangle({'strokeStyle':strokeStyle,'position':[150,300,100,200,200,200],'callback':f0})
				.triangle({'strokeStyle':strokeStyle,'position':[150,100,100,200,200,200],'callback':f0})

				.triangle({'strokeStyle':strokeStyle,'position':[200,200,150,300,250,300],'callback':f1})
				.triangle({'strokeStyle':strokeStyle,'position':[200,200,300,200,250,300],'callback':f1})
				.triangle({'strokeStyle':strokeStyle,'position':[300,200,250,300,350,300],'callback':f1})
				.triangle({'strokeStyle':strokeStyle,'position':[300,200,350,300,400,200],'callback':f1})
				.triangle({'strokeStyle':strokeStyle,'position':[150,300,100,400,200,400],'callback':f1})
				.triangle({'strokeStyle':strokeStyle,'position':[150,300,200,400,250,300],'callback':f1})
				.triangle({'strokeStyle':strokeStyle,'position':[250,300,200,400,300,400],'callback':f1})
				.triangle({'strokeStyle':strokeStyle,'position':[250,300,300,400,350,300],'callback':f1})

				.triangle({'strokeStyle':strokeStyle,'position':[100,0,150,100,200,0],'callback':f2})
				.triangle({'strokeStyle':strokeStyle,'position':[200,0,150,100,250,100],'callback':f2})
				.triangle({'strokeStyle':strokeStyle,'position':[200,0,250,100,300,0],'callback':f2})
				.triangle({'strokeStyle':strokeStyle,'position':[300,0,250,100,350,100],'callback':f2})
				.triangle({'strokeStyle':strokeStyle,'position':[150,100,250,100,200,200],'callback':f2})
				.triangle({'strokeStyle':strokeStyle,'position':[250,100,200,200,300,200],'callback':f2})
				.triangle({'strokeStyle':strokeStyle,'position':[250,100,300,200,350,100],'callback':f2})
				.triangle({'strokeStyle':strokeStyle,'position':[350,100,300,200,400,200],'callback':f2});


        }

        function box2(){
        	canvas

            .cube({
                'positions':[
                    [200,100,100,200,300,200],
                    [200,100,300,200,400,100],
                    [100,200,300,200,200,300],
                    [300,200,200,300,400,300],
                    [400,100,300,200,500,200],
                    [300,200,400,300,500,200]
                ]
            })
				.cube({
                    'positions':[
                        [200,300,400,300,300,400],
						[300,400,400,300,500,400],
						[400,300,500,200,500,400],
						[500,400,500,200,600,300]
                    ],
					'colors':['#f60','#c45100','#ff9300']
				})
				.cube({
                    'positions':[
                         [400,100,500,200,500,100]
                        ,[500,100,500,200,600,200]
                        ,[500,200,600,200,600,300]
                    ],
					'colors':['#c45100','#c45100','#ff9300']
				});
        }

		$(function () {
            canvas=new System.Html5.Three(document.getElementById("box1"));
            


           	System.run(function(){
           		let x = 1, y =0, z = 0;
           		function animate () {
           			requestAnimationFrame(animate);
					canvas.clearRect(0, 0, canvas.theCanvas.width, canvas.theCanvas.height);
           			z += 0.01
           			
           			canvas
           				.save()
			            .translate(++x, 0)
			            ;

			        box();
			        canvas.restore();

			        canvas
           				.save()
           				.scale(z, z)
			            .translate(0, y++);
			            
           			box2();
           			canvas.restore();
           		}

           		
           		System.listen(function(){
           			animate();
			            return true;
           		},1000/60);


           	});
            

            // new System.Drag(canvas.theCanvas,{'noText':true});
        });


	});
</script>
</body>
</html>